<template>

    <div id="memory_me_box"  ref="wr_box">
        <div id="pre_select">
            <span style="font-size: 15px;"> 分类：</span>
            <Select v-model="model" style="width:200px" @on-change="kind_change" >
                <Option v-for="item in OptionList" :value="item.value" :key="item.value">{{ item.label }}
                </Option>
            </Select>

            <span style="font-size: 15px;margin-left: 10px;">日期:</span>
            <a-date-picker style="width: 220px; margin: 0 24px 24px 10px; " show-time format="YYYY-MM-DD hh:mm"
                @change="data_change" />

            <div style="display: inline-block; float: right;">
                <Button @click="up_load_files" type="info">上传风景</Button>
                <input @change="files_change" type="file" ref="up_files" style="display: none;"
                    accept="image/*,video/*" multiple>
                <Button @click="text_pre_view" type="warning" style="margin-left: 5px;">预览</Button>
                <Button @click="text_up"  type="success" style="margin-left: 5px;">记录</Button>
            </div>
        </div>


        <div id="content_editor" >

            <div style="margin:1px auto 1px auto; width: 500px; text-align: center; "><n-input @input="title_change"
                    maxlength="35" show-count placeholder="请输入标题" clearable /></div>
            <!-- <div>文本功能行</div> -->
            <!-- 组件嵌套导致要穿透 -->
            <n-input  show-count  placeholder="  记录您的生活！" @input="get_text" default-value="    "   type="textarea" style="font-size: 18px;" size="small" :autosize="{
                    minRows: 18,
                    maxRows: 18,
                }" />

        </div>
               
    </div>





    <div class="del_f_box" ref="d_f_box">


           <div id="search_life">
                <n-space  vertical style="width: 300px;margin:2px 0 0 20%;"  >
                     <div style="position: relative;">
                        <n-input  @input="test12" @keyup=exit_enter clearable="true"   round placeholder="回车搜索关键字"  @on-clear="del_search_d" />
                    </div>               
                </n-space>
           </div>  



           <div>
            <span><Button type="info" @click="recyclable">恢复</Button></span>
             <Select v-model="model" style="width:200px">
                    <Option v-for="item in kind_select" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            <span><Button type="info" @click="select_kind_list">过滤</Button></span>
            <span><Button type="info" @click="reset_select_kind_list">重置</Button></span>
            <span><Button type="info" @click="reset_select_delete_list">删除选中</Button></span>
            </div>



           <div>
                <div class="search_list" v-for="(i,index) in page_card_d_current" :key="index"><span ><i @click="select_check" ></i></span><span :uuid="i.life_data_id">{{index+1+(c_index-1)*page_l_count}}</span>
                <span>种类：{{p_kind_select[i.kind]}}</span><span>标题:{{i.title}}</span><span>时间:{{i.date}}</span><span @click="render_list_pre">预览</span><span @click="del_list_pre">删除</span></div>
                <div v-if="page_card_d!=undefined&&page_card_d.length!=0" style="display:inline-block; opacity: 0.8; margin-left:500px;bottom: 80px;"> 
                    <Page v-model="c_index" :modelValue="1" :total=page_card_d.length :page-size=page_l_count simple @on-change="render_search_list" />
                </div>
                <div v-else style="text-align: center;font-size: 15px;">还没有记录哦,抓紧记录生活吧!</div>
            </div>
 
    </div>
   <showcover  :show_cover="show_cover"/>
   <listbox  :show_list="show_list"   :data="show_list_Data" :title1="'种类'"
    :title2="'标题'" :title3="'日期'"  :func1_txt="'恢复'" :func2_txt="'彻底删除'"
    :func1="recyclable_retract"
    :func2="recyclable_delete"
    :uuidkey="'life_data_id'"
    :parameter1="'kind'"
    :parameter2="'title'"
    :parameter3="'date'"
    @show_list_close="showlist_close"
    :loadMore="loadMore_recyclable"
   ></listbox>
   <txtview v-if=show_txt :data="iviewdata" @show_txtpreview_close="showtxtpreview_close"/>
</template>


<script setup>
import {up_mylife_data} from "/src/api/life.js"
import { onMounted,nextTick, ref, computed,inject } from 'vue'; 
import { useRoute, } from "vue-router";
import { fix_life_data, get_life_data, get_mylife_data_Byid } from '../../api/life.js'
import { export_pre_memory } from  "../../api/docxs.js"
import { user_Store } from '../../store/user.js'
import showcover  from "../../components/common/cover.vue"
import listbox from "../../components/common/list.vue"
import txtview from "../../components/common/txtpreview.vue"
import { warning, success } from "../../static/js/alert.js"
import { life_data_kind } from "../../static/dict/user_lifekind.js"
import { customDivision } from "@/static/js/number/division.js";
let show_cover = ref(false)
let show_txt = ref(false)
let iviewdata = ref()
let show_list = ref(false)
let show_list_Data = ref([])
let user = inject('user')()
let p_kind_select = { 'default': '随笔', 'life': '生活', 'diary': "日记", 'food': '美食' }
let kind_select = [{ value: 'default', label: '随笔' },
    {value: 'life', label: '生活' },
    {value: 'diary', label: '日记' },
    {value: 'food', label: '食物'}
]
let model = ref()
let search_info=ref()
let c_index=ref(1)
let page_card_d_current=ref([])
let page_card_d = ref([])
let page_l_count=12
let life_data = ref()
let wr_box = ref()
let d_f_box=ref()
let Router_=useRoute()
let title = ref('无题')
let date=ref(new Date().toLocaleString())
let files =ref([])
let kind = ref('随笔')
let file_extentions = ['mp4', 'jpg', 'npg', 'mkv']
let file_video_extentions = ['mp4']
let up_files = ref()
let text_mycontent = ref("    ")
let del_pre=ref([])
const OptionList = [
                    {
                        value: 'default',
                        label: '随笔'
                    },
                    {
                        value: 'life',
                        label: '生活'
                    },
                    {
                        value: 'food',
                        label: '美食'
                    },
                    {
                        value: 'diary',
                        label:'日记'
                    }
]


// 由于ui组件提供的事件绑不上，导致无法双向绑定文本
const get_text = function(text) {
    // console.log(text)
    text_mycontent.value = text
}

//附带文件上传
const up_load_files = function() { 
    if (files.value.length <= 5) {
        up_files.value.click()
    } else {
        confirm("最多上传6份")
    }
}

const files_change = function() { 
    //处理文件名，防止用户伪装    
    Array.from(up_files.value.files).forEach((item) => {
        var fileName = item.name
        const fileExtension = fileName.split('.').pop();
        if (file_extentions.includes(fileExtension)) {
            if (item.size <= 200 * 1024 * 1024) { 
                files.value.push(item)
            } else { 
                confirm('请上传小于200M的图片或视频！')
            }
        } else { 
            confirm(fileName + '禁止上传该格式文件！')
        }
    })
      
    //刷新文件选择
    up_files.value.setAttribute('type', 'text')
    up_files.value.setAttribute('type', 'file')
}

//pre_select获取 ，未使用绑定value
const kind_change = function(kind_) { 
    kind.value = kind_
}
const data_change = function(date_) { 
    date.value = date_
}
const title_change = function(title_) { 
    title.value = title_
}

//记录预览nav功能行
const pre_check = function() { 
    
}
const pre_cancle = function() { 
    document.querySelector('#memory_me_box').removeChild(document.querySelector('.pre_box_c'))
}
 
const pre_out_put = async function() { 
    if (text_mycontent.value == '    ' || text_mycontent.value == '') { 
        warning("内容为空！") 
        return 
    }
    var fd = new FormData()
    
    if (files.value.length) { 
        console.log(files.value)
        console.log(files.value.length)
        for (let i = 0; i < files.value.length; i++) { 
            fd.append(`file${i}`, files.value[i])
        }
    }
    
    fd.append('title', title.value)
    fd.append('date', date.value)
    fd.append('content', text_mycontent.value)

    await export_pre_memory(user.value.get_user().id, fd)
}

const text_pre_view = function() { //预览写作
    
    //主盒子
    let pre_display = document.createElement('div')
    pre_display.classList.add('pre_box_c')

    //操作导航
    let pre_box_nav = document.createElement('div')
    pre_box_nav.classList.add('pre_box_nav_c')
    pre_box_nav.innerHTML = `
        <div class='pre_nav_bt' style="text-align: center; font-size: 15px;">
            <button id="pre_daochu"><span>导出</span></button>
            <button id="pre_jiansuo"><span>检索</span></button>
            <button id="pre_quxiao"><span>取消</span></button>
        </div>
    `
    // 文件盒子
    let pre_files_box = document.createElement('div')
    pre_files_box.classList.add('pre_files_c')

    files.value.forEach((item) => {
        let extention = item.name.split('.').pop()

        let del = document.createElement('span')
        del.setAttribute('style', 'position:absolute;top:-5px;right:-5px;background-color: transparent;')
        del.innerHTML = "<span class='delete-icon'></span>"
        del.addEventListener('click', (e) => {
            files.value = files.value.filter(item_ => item_.name !== item.name)
            e.target.parentNode.parentNode.parentNode.removeChild(e.target.parentNode.parentNode)
        })

        let min_box = document.createElement('div')
        min_box.setAttribute('style', 'position:relative;display:inline-block;')

        if (file_video_extentions.includes(extention)) {
            // URL.createObjectURL(item)
            let pre_video = document.createElement('video')
            pre_video.classList.add('pre_files_chicun')
            pre_video.src = URL.createObjectURL(item)
            pre_video.loop = true
            pre_video.muted = true
            pre_video.autoplay = true

            min_box.appendChild(pre_video)
            min_box.appendChild(del)
            pre_files_box.append(min_box)
        } else {
            let pre_img = document.createElement('img')
            pre_img.classList.add('pre_files_chicun')
            pre_img.src = URL.createObjectURL(item)

            min_box.append(pre_img)
            min_box.append(del)
            pre_files_box.append(min_box)
        }
    })

    // 标题
    let pre_title = document.createElement('p')
    pre_title.classList.add('pre_title_c')
    pre_title.innerText = title.value

    // 选择盒子
    let pre_k_d_box = document.createElement('div')
    pre_k_d_box.classList.add('pre_k_d_box_c')
    let pre_k = document.createElement('span')
    pre_k.classList.add('pre_k_c')
    pre_k.innerText = kind.value
    let pre_d = document.createElement('span')
    pre_d.classList.add('pre_d_c')
    pre_d.innerText = date.value
    pre_k_d_box.append(pre_k)
    pre_k_d_box.append(pre_d)

    //文本盒子
    let pre_text = document.createElement('textarea')
    pre_text.classList.add('pre_text_c')
    pre_text.id = 'pre_body_mycontent'
    pre_text.textContent = text_mycontent.value
    pre_text.addEventListener('input', () => { 
        text_mycontent.value = pre_text.value
        document.querySelector('.n-input__textarea-el').value = text_mycontent.value
    })
    // 拼接
    pre_display.append(pre_box_nav)
    pre_display.append(pre_files_box)
    pre_display.append(pre_title)
    pre_display.append(pre_k_d_box)
    pre_display.append(pre_text)
    
    document.querySelector('#memory_me_box').append(pre_display)

    document.querySelector('#pre_quxiao').addEventListener('click', pre_cancle)
    document.querySelector('#pre_jiansuo').addEventListener('click', pre_check)
    document.querySelector('#pre_daochu').addEventListener('click', pre_out_put)
}

// 搜索功能
const del_search_d = function() { //清空搜索内容
    document.querySelector('.n-input__input-el').value = ""
}

const search_mylife = function() {  //实现搜索文章
    
}

const exit_enter = function(event) {
    if (event.key === 'Enter' || event.keyCode === 13) { //按回车键
        event.preventDefault(); 
        search_mylife()
    }
}

const test12 = function(info) {
    search_info.value = info
}

// 提交记录
const text_up = async function() { 
    if (title.value == '') {
        title.value = "无题"
    }
    let kind_ = kind.value
    if (kind.value == "随笔") { 
        kind_ = 'default'
    }
    
    let formdata = new FormData()
    formdata.append('user_id', user.value.get_user().id)
    formdata.append('title', title.value)
    formdata.append('kind', kind_)
    formdata.append('date', date.value)
    formdata.append('content', text_mycontent.value)
    for (var i = 0; i < files.value.length; i++) {
        console.log(files.value[i])
        formdata.append(`file${i}`, files.value[i])
    }
    await up_mylife_data(formdata)    
}

// 记录页数据列表分页
const render_search_list = function(index) {
    page_card_d_current.value = page_card_d.value.slice((index - 1) * page_l_count, index * page_l_count)
    c_index.value = index
    if (page_card_d.value.length < index * page_l_count) {          
    } 
    deal_check_data()
}

// 数据预览/删除/修改
const select_kind_list = async function() { 
    await nextTick()
    document.querySelectorAll('.search_list').forEach((item) => { 
        item.childNodes[0].childNodes[0].setAttribute('style', 'background-color:white')
    })
   
    if (model.value != undefined && model.value != '') {  
        page_card_d.value = await user.value.get_user_life_data().filter(item => item.kind == model.value)
        page_card_d_current.value = page_card_d.value.slice(0, page_l_count)
    }
    del_pre.value = []
}

const deal_check_data = async function() { 
    await nextTick()
    document.querySelectorAll('.search_list').forEach((item) => {
        if (del_pre.value.includes(item.childNodes[1].getAttribute('uuid'))) {
            item.childNodes[0].childNodes[0].setAttribute('style', 'background-color:pink')
        } else {
            item.childNodes[0].childNodes[0].setAttribute('style', 'background-color:white')
        }
    })
}

const reset_select_kind_list = async function() { 
    await nextTick()
    document.querySelectorAll('.search_list').forEach((item) => { 
        item.childNodes[0].childNodes[0].setAttribute('style', 'background-color:white')
    })
    page_card_d.value = life_data.value
    page_card_d_current.value = page_card_d.value.slice(0, page_l_count)
    model.value = undefined
    del_pre.value = []
    c_index.value = 1
}

const select_check = function(event) { 
    if (event.target.style.backgroundColor == 'white' || event.target.style.backgroundColor == '') {
        event.target.setAttribute('style', 'background-color:pink')
        del_pre.value.push(event.target.parentNode.parentNode.childNodes[1].getAttribute('uuid'))
    } else {
        event.target.setAttribute('style', 'background-color:white')
        del_pre.value = del_pre.value.filter((i) => {
            return i != event.target.parentNode.parentNode.childNodes[1].getAttribute('uuid')
        })
    } 
}

//刷新展示数据
const render_list_data = async function() { 
    user.value.user_life_data = await get_life_data(user.value.get_user().id, 1)
    life_data.value = user.value.user_life_data
    page_card_d.value = life_data.value
    console.log(user.value.user_life_data)
    if (page_card_d.value != undefined) {
        page_card_d_current.value = page_card_d.value.slice(0, page_l_count)
    } else { 
        page_card_d_current.value = []
        page_card_d.value=[]
    }
}

// 展示选中
const render_list_pre = async function(event) {
    // 避免数据过大，导致卡顿
    // 直接从数据获取,服务器承压
    const dataid = event.target.parentNode.childNodes[1].getAttribute('uuid')
    let data = await get_mylife_data_Byid(user.value.get_user().id, dataid)
    
    if (data != 0) {
        // 由于数据存储的处理问题需要对标题处理。
        iviewdata.value = data
        iviewdata.value.kind = life_data_kind[iviewdata.value.kind]
        show_cover.value = true
        show_txt.value = true   
    }
}

const showtxtpreview_close = function() { 
    iviewdata.value = {}
    show_cover.value = false
    show_txt.value = false
}

// 预览的单个删除功能
const del_list_pre = async function(event) { 
    const dataid = event.target.parentNode.childNodes[1].getAttribute('uuid')
    await fix_life_data(user.value.get_user().id, dataid, 2)
    render_list_data()
}

// 预览批量删除
const reset_select_delete_list = async function() { 
    fix_life_data(user.value.get_user().id, del_pre.value, 4)
    location.reload()
}

//预览的回收机制
//打开回收站
const recyclable = async function() { 
    // 回收站功能
    let data = await get_life_data(user.value.get_user().id, 2)
    show_list_Data.value = []
    if (!data) {
        data=[]
        // warning("暂无!")
        // return
    } else if (data.length > 0) { 
        show_list_Data.value = data.slice(0, 10)
        
    }
    show_list.value = true
    show_cover.value = true

     
    
   
}
// 架子回收站进度数据
const loadMore_recyclable = async () => {
    // 这个10在于列表展示10个刚好
    const data = await get_life_data(user.value.get_user().id, 2, customDivision(show_list_Data.value.length, 10));
     console.log(data)
    if (data) {
        // 使用 reduce 去重
        const uniqueData = data.reduce((acc, current) => {
        const isDuplicate = acc.some(item => item.life_data_id === current.life_data_id);
        if (!isDuplicate) {
            acc.push(current);
        }
        return acc;
        }, show_list_Data.value);
        
        show_list_Data.value=uniqueData;
        
    }
    };
// 关闭回收站
const showlist_close = async function () { 
    show_cover.value = false
    show_list.value = false
    show_list_Data.value = []
    // 刷新数据
    const newdata = await get_life_data(user.value.get_user().id, 1)
    if (newdata) {
        user.value.set_user_life_data(newdata)
        life_data.value = user.value.user_life_data;
        page_card_d.value = life_data.value
        page_card_d_current.value = page_card_d.value.slice(0, page_l_count)
    }
}


// 回收
const recyclable_retract = async function (info) {
    const dataid = String(info.life_data_id)
    console.log(info)
    console.log(dataid)
    const result =await fix_life_data(user.value.get_user().id, dataid, 1)
    if (result == 0) { 
        warning("服务器响应失败!")
        return
    }
    if (result == 1) { 
        // 未知问题,不显式return会使数据为空
        show_list_Data.value=show_list_Data.value
            .filter(item => {return item.life_data_id !== Number(dataid)} );
        success("恢复成功!")
        return
    }
}

//彻底删除   
const recyclable_delete = function(e) { 
    const dataid = e.target.parentNode.parentNode.getAttribute('uuid')
    const result = fix_life_data(user.value.get_user().id, dataid, 3)
    if (result == 0) { 
        warning("服务器响应失败!")
        return
    }
    if (result == 1) { 
        success("删除成功!")
        return
    }
}


onMounted(async () => {
      if (Router_.query.id == 0) {
        wr_box.value.style.display = 'none';
    } else { 
        d_f_box.value.style.display= 'none';
  }

    if (user.value.get_user_life_data() == undefined) {
        user.value.user_life_data=user.value.set_user_life_data(await get_life_data(user.value.get_user().id,1))
    }
    if (user.value.get_user_life_data() == undefined) {
        user.value.user_life_data = await get_life_data(user.value.get_user().id, 1)
        
    }
    
    life_data.value = user.value.user_life_data;
    page_card_d.value = life_data.value
 
    if (page_card_d.value != undefined && page_card_d.value.length > 0) { 
        page_card_d_current.value = page_card_d.value.slice(0, page_l_count)
    }
  
    

}) 



</script>

<style scoped>
*{
    user-select: none;
}

#content_editor{
    height: 500px;
}


/* 预览的最大盒子 */
:deep(.pre_box_c) {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

/* 预览操作导航 */
:deep(.pre_box_nav_c) {
  width: 100%;
  max-width: 900px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* 导航按钮 */
:deep(.pre_nav_bt > button) {
  padding: 8px 16px;
  font-size: 14px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

:deep(.pre_nav_bt > button:hover) {
  transform: translateY(-2px);
}

:deep(#pre_daochu) {
  background-color: #d9f0e4;
  color: green;
}

:deep(#pre_daochu:hover) {
  background-color: #c0e8d4;
}

:deep(#pre_jiansuo) {
  background-color: #fdf0db;
  color: orange;
}

:deep(#pre_jiansuo:hover) {
  background-color: #fbe6c2;
}

:deep(#pre_quxiao) {
  background-color: #f8dde3;
  color: rgb(235, 109, 130);
}

:deep(#pre_quxiao:hover) {
  background-color: #f6cbd6;
}

/* 预览的文件盒子 */
:deep(.pre_files_c) {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 900px;
  margin-bottom: 20px;
}

/* 预览文件尺寸限制 */
:deep(.pre_files_chicun) {
  height: 150px;
  width: 200px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

:deep(.pre_files_chicun:hover) {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 删除按钮 */
:deep(.pre_files_c .del) {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

:deep(.pre_files_c .del:hover) {
  background-color: rgba(255, 0, 0, 0.8);
}

/* 预览标题 */
:deep(.pre_title_c) {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  text-align: center;
}

/* 预览选择盒子 */
:deep(.pre_k_d_box_c) {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #666;
}

/* 预览文本 */
:deep(.pre_text_c) {
  width: 100%;
  max-width: 900px;
  height: 400px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.5;
  resize: none;
  outline: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

:deep(.pre_text_c:focus) {
  border-color: #007bff;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);
}

/* 隐藏滚动条 */
:deep(.pre_text_c::-webkit-scrollbar) {
  display: none;
}
:deep( ::-webkit-scrollbar){
    display: none;
}
:root {
  --primary-color: #19be6b;
  --danger-color: #ed4014;
  --border-radius: 5px;
  --spacing: 15px;
  --font-size: 16px;
  --line-height: 32px;
}
/* 基础样式 */
.del_f_box {
  height: 650px;
}

/* 第二层 div 的样式 */
.del_f_box > div:nth-child(2) {
  margin-top: 15px;
  width: 1000px;
}

/* 第二层 div 内的 span 样式 */
.del_f_box > div:nth-child(2) > span {
  margin: 0 20px 0 25px;
}

/* 第三层 div 的样式 */
.del_f_box > div:nth-child(3) {
  height: 550px;
  margin-top: 16px;
  padding-left: 30px;
  padding-top: 10px;
}

/* 搜索列表项样式 */
.search_list {
  position: relative;
  height: 32px;
  font-size: 16px;
  line-height: 32px;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-bottom: 8px;
  padding: 0 10px;
  background-color: #f9f9f9;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s, box-shadow 0.3s;
}

.search_list:hover {
  background-color: #f1f1f1;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
}
/* 搜索列表项内的 span 通用样式 */
.search_list > span {
  position: absolute;
  display: inline-block;
  text-align: center;
}
/* 第一个复选框 */
.search_list > span:nth-child(1) {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  height: 32px;
  line-height: 32px;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

/* 复选框图标 */
.search_list > span:nth-child(1) > i {
  vertical-align: middle;
  display: inline-block;
  height: 20px;
  width: 20px;
  background-color: white;
  border: 1px solid black;
  border-radius: 2px;
}

/* 第二个 span（序号） */
.search_list > span:nth-child(2) {
  left: 50px;
}

/* 第三个 span（种类） */
.search_list > span:nth-child(3) {
  left: 120px;
}

/* 第四个 span（标题） */
.search_list > span:nth-child(4) {
  left: 250px;
}

/* 第五个 span（时间） */
.search_list > span:nth-child(5) {
  left: 750px;
}
/* 第六个 span（预览按钮） */
.search_list > span:nth-child(6) {
  left: 1000px;
  width: 40px;
  height: 100%;
  background-color: #19be6b;
  color: #ffffff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
  transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
  cursor: pointer;
}

.search_list > span:nth-child(6):hover {
  background-color: #17a55e;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
  transform: translateX(-6px);
}

/* 第七个 span（删除按钮） */
.search_list > span:nth-child(7) {
  left: 1050px;
  width: 40px;
  height: 100%;
  background-color: #ed4014;
  color: #ffffff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
  transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
  cursor: pointer;
}

.search_list > span:nth-child(7):hover {
  background-color: #d83612;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
  transform: translateX(6px);
}

::v-deep(.recyclable_box_cover){
    width: 100vw;
    height: 100vh;
    background-color: white;
    opacity: 0.5;
    position:absolute;
    left: 0px;
    top: 0px;
}
::v-deep(.recyclable_box){

}
/* 删除span */
::v-deep(.delete-icon) {
        display: inline-block;
        width: 15px;
        height:15px;
        background-color: black;
        color: red;
        text-align: center;
        line-height: 15px;
        border-radius: 50%;
        font-size: 15px;
        font-weight: bold;
        cursor: pointer;
        transition: background-color 0.3s, transform 0.3s;
        user-select: none;
}

::v-deep(.delete-icon:hover) {
        background-color: red;
        transform: scale(1.1);
}

::v-deep(.delete-icon:active) {
        background-color: #cc0000;
        transform: scale(1);
}

</style>

